<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        div.padding {
            border: 1px solid black;
            background-color: lightblue;
            padding: 50px 30px 50px 80px;
        }

        div.margin {
            border: 1px solid black;
            margin: 100px 150px 100px 80px;
            background-color: lightblue;
        }

        div.center {
            width: 300px;
            margin: auto;
            border: 1px solid red;
        }

        h1 {
            margin: 0 0 50px 0;
        }

        h2 {
            margin: 20px 0 0 0;
        }
    </style>
</head>

<body>
<h2>Using individual padding properties</h2>
<div class="padding">This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and
    a left padding of 80px.
</div>
<hr>
<h2>Using individual margin properties</h2>
<div class="margin padding">This div element has a top margin of 100px, a right margin of 150px, a bottom margin of
    100px, and a left margin of 80px.
</div>
Using individual margin properties
<hr>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will
    then
    take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div class="center">This div will be horizontally centered because it has margin: auto;</div>

<hr>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the
    vertical
    margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin
    ends
    up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>